<template>
    <div class="menuItem">

        <template v-for="menuItem in menuItems">
            <!-- 最后一级菜单 -->
            
            <el-menu-item v-if="!menuItem.childMenus || menuItem.childMenus.length == 0" :key="menuItem.uuid"
                :index="menuItem.menuRouter">
                <span class="left_menu_icon_box" v-html="menuItem.menuIcon"></span> {{ menuItem.menuName }}
            </el-menu-item>

            <!-- 此菜单下还有子菜单 -->
            <el-submenu v-if="menuItem.childMenus && menuItem.childMenus.length != 0" :key="menuItem.uuid" :index="menuItem.uuid">
                <template slot="title">
                    <span class="left_menu_icon_box" v-html="menuItem.menuIcon"></span> {{ menuItem.menuName }}
                </template>
                <!-- 递归 -->
                <MenuItem :menuItems="menuItem.childMenus"></MenuItem>
            </el-submenu>
        </template>

    </div>
</template>

<script>
export default {
    name: 'MenuItem',
    props: ['menuItems'],
    data() {
        return {}
    },
    methods: {}
}
</script>

<style lang="less">
.left_menu_icon_box{
    svg{
        width: 16px;
        height: 16px;
        position: relative;
        top: -3px;
    }
}
</style>
